<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>04_05_css属性</title>
	<base target="blank">
	<style>
		#konwledege{
			position: fixed;
			right: 2%;
			top:2%;
			text-decoration:underline;
			color:inherit;
			outline: none;
			color: orange;
			font-size: 12px;
		}
		#toTop{
			position: fixed;
			right: 2%;
			bottom: 2%;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			border-radius: 100%;
			width: 40px;
			height: 40px;
			line-height: 40px;
			font-size: 12px;
			text-align: center;
			color: red;
		}
		*{margin:0;padding: 0;}
		body{
			font-family: 'Microsoft yahei', Verdana, '仿宋',Arial, Helvetica, sans-serif;
			font-size: 18px;
			margin: auto;
			position: relative;
			padding-bottom: 500px;
		}
		a{text-decoration:none;color:inherit;outline: none;}
		img{border:none;vertical-align: middle;outline:none;}
		li{list-style:none;}
		/*-----------------------函数定义---------------------------------*/
		@keyframes slider{
			0%{left:0;}
			100%{left: -800px;}
		}
		@keyframes slider-font{
			0%{text-shadow: none;}
			100%{text-shadow:0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; }
		}

		/*-----------------------轮播---------------------------------*/
		figure.slider{
			position: relative;
			margin: 50px auto;
			width: 800px;
			height: 200px;
			overflow: hidden;
			cursor:pointer;
		}
		figure.slider >figcaption{
			position: relative;
			top:0px;
			z-index: 2;
			text-align: center;
		}
		figure.slider >figcaption > h2{
			display: inline-block;
		}
		figure.slider >figcaption > h2.on{
			text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; 
			font-family:Verdana, Geneva, sans-serif; 
			font-size:100px;
		 	font-weight:bold; 
		 	color:white;
		 	transform:scale(0.3);
		 	animation: slider-font 2s ease-in-out infinite alternate both;
		}
		figure.slider > ul{
			position: absolute;
			top:0;
			left: 0;
			height: 100%;
			width: 1000%;
		}
		figure.slider > ul.on{
			animation:slider 15s linear infinite both;
		}
		figure.slider > ul:hover{
			animation-play-state:paused;
		}
		figure.slider > ul > li{
			float: left;
			height: 100%;
			width: 200px;
			box-sizing: border-box;
		}
		figure.slider > ul > li > img{
			width: 100%;
			height: 100%;
			border:none;
		}
		/*-----------------------延迟动画---------------------------------*/
		figure.c2{
			position: relative;
			margin: 50px auto;
			width: 870px;
			height: 300px;
		}
		figure.c2 >figcaption{
			position: relative;
			top:-30px;
			display: flex;
			justify-content:center;
		}
		figure.c2 >ul{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content:space-around;
		}
		figure.c2 >ul>li{
			position: relative;
			box-sizing: border-box;
			width: 24%;
			height: 100%;
			cursor:pointer;
			overflow: hidden;
		}
		figure.c2 >ul>li:nth-child(1){
			background-color:  #3f74ff;
		}
		figure.c2 >ul>li:nth-child(3){
			background-color: #45ff39;
		}
		figure.c2 >ul>li:nth-child(2){
			background-color:  #ff7f19;
		}
		figure.c2 >ul>li:nth-child(4){
			background-color:  #06edff;
		}
		figure.c2 >ul>li>div:nth-child(1){
			position: relative;
			height: 50%;
		}
		figure.c2 >ul>li>div:nth-child(1) >img{
			position: absolute;
			top:0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}
		figure.c2 >ul>li>div:nth-child(1)>img:nth-child(2){
			width: 80px;
			height: 80px;
			transform:rotate(0deg) scale(1);
			transition:0.5s;
		}
		figure.c2 >ul>li>div:nth-child(1) > img:nth-child(2).l20{
			left:20px;
		}
		figure.c2 >ul>li>div{
			box-sizing: border-box;
			padding-top:40px;
			color:#fff;
			text-align: center;
			line-height: 1.6em;
			height: 50%;
			width: 100%;
		}
		figure.c2 >ul>li>div:nth-child(2){
			position: relative;
			top:0;
			left: 0;
			transition:.5s  ease-out;
		}
		figure.c2 >ul>li>div:nth-child(2)>a{
			font-style: normal;
			display: inline-block;
			padding:5px 8px;
			background-color:rgba(0,0,0,0.5);
		}
		figure.c2 >ul>li>div:nth-child(3){
			position: absolute;
			right: -100%;
			bottom: 0;
			width: 100%;
			background-color:rgba(0,0,0,.5);
			height: 50%;
			transition:.5s ease-out;
		}
		figure.c2 >ul>li>div:nth-child(3)>h2{
			margin-bottom: 5px;
		}
		figure.c2 >ul>li:hover div:nth-child(1)>img:nth-child(1){
			opacity: 0;
		}
		figure.c2 >ul>li:hover div:nth-child(1)>img:nth-child(2){
			transform:rotate(360deg) scale(1.6);
		}
		figure.c2 >ul>li:hover div:nth-child(2){
			top:200px;
			transition:.5s .5s ease-out;
		}
		figure.c2 >ul>li:hover div:nth-child(3){
			right:  0;
			transition:.5s 1s ease-out;
		}
		/*-----------------------手风琴---------------------------------*/
		figure.c3{
			position: relative;
			margin:100px auto;
			display: flex;
			align-items: center;
			width: 1200px;
			height:400px;
			background-color: pink;
		}
		figure.c3>figcaption{
			position: absolute;
			top:-35px;
			left: 45%;
		}
		figure.c3>.wrap{
			box-sizing: border-box;
			border:3px solid #aaa;
			height: 80%;
			width: 100%;
			background-color: #abcedf;
		}
		figure.c3>.wrap>ul{
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;

		}
		figure.c3>.wrap>ul>li{
			box-sizing:border-box;
			position: relative;
			width: calc(100%/6);
			height: 100%;
			transition: 1.5s ease-in-out;
			overflow: hidden;
			border:1px solid #fff;
			cursor: pointer;
		}
		figure.c3>.wrap>ul>li>ol{
			position: relative;
			margin: auto;
			margin-top:50px;
			width: 1000px;
			height: 60%;
			background-color: rgba(0,0,0,.5);
			transition: 1s;
		}
		figure.c3>.wrap>ul>li>ol>li{
			position: relative;
			box-sizing: border-box;
			float:left;
			height: 100%;
			width: 25%;
			z-index: 1;
			transition: 1s;
			background-color: rgba(0,0,0,.5);
		}
		figure.c3>.wrap>ul>li>ol>li>img{
			width: 100%;
			height: 100%;
			border:none;
		}
		figure.c3>.wrap>ul>li>ol>li:nth-child(5){
			position: absolute;
			bottom:  0%;
			left: 0;
			height: 50%;
			width: 100%;
		}
		figure.c3>.wrap>ul>li>ol>li:nth-child(6){
			position: absolute;
			top:  0%;
			left: 0;
			height: 50%;
			width: 100%;
		}
		figure.c3>.wrap>ul>li>h1{
			position: absolute;
			top:35%;
			left: 25%;
			margin: auto;
			color:#fff;
			font-size: 50px;
			transition-delay: 1s;
			opacity: 1;
			z-index: 3;
		}
		figure.c3>.wrap>ul>li:hover{
			width: 500%;
		}
		figure.c3>.wrap>ul>li:hover ol>li:nth-child(5),
		figure.c3>.wrap>ul>li:hover ol>li:nth-child(6){
			height: 0%;
		}
		figure.c3>.wrap>ul>li:hover h1{
			opacity: 0;
			transition-delay:0s;
		}
		/*-----------------------牛排---------------------------------*/
		figure.c4{
			position: relative;
			margin: 100px auto;
			height: 200px;
			display: flex;
			justify-content:space-around;
			align-items:center;
		}
		figure.c4>figcaption{
			position: absolute;
			top:-45px;
			display: flex;
			justify-content: center;
		}
		figure.c4>.steak{
			box-sizing: border-box;
			padding: 12px;
			width: 100px;
			height: 100px;
			border: 8px solid #cb8668;
			border-radius: 50%/30% 70% 25% 50%;
			background-color:  #b45227;
		}
		figure.c4>.steak >.line{
			width: 95%;
			height: 95%;
			background: 
			    -webkit-linear-gradient(0deg,rgb(79, 71, 71) 3px,transparent 3px) 8px 0px/1em 1em,
			    -webkit-linear-gradient(90deg,rgb(79, 71, 71) 3px,transparent 0,transparent 15px) 0 8px/1em 1em
			;
			transform: rotate(107deg);
			opacity: 0.2;
		}
		/*-----------------------太极图---------------------------------*/
		@keyframes taiji{
			0%{transform:rotate(0deg)}
			100%{transform:rotate(360deg)}
		}
		figure.c4>.bagua{
			position: relative;
			box-sizing: border-box;
			width: 200px;
			height: 200px;
			border-width: 2px 2px 100px 2px;
			border-style:solid;
			border-radius:50%;
			animation:taiji 5s linear infinite both;
			cursor:pointer;
		}
		figure.c4>.bagua:hover{
			animation-play-state:paused;
		}
		figure.c4>.bagua:before{
			position: absolute;
			top:50%;
			left: 0;
			content: "";
			box-sizing: border-box;
			width: 98px;
			height: 98px;
			border:39px solid #000;
			border-radius: 50%;
			z-index: 2;
			background-color: #fff;

		}
		figure.c4>.bagua:after{
			box-sizing: border-box;
			position: absolute;
			top:50%;
			right: 0;
			content: "";
			width: 98px;
			height: 98px;
			border:39px solid #fff;
			background-color: #000;
			border-radius:50%;
		}
		/*-----------------------彩条---------------------------------*/
		@keyframes caitiao{
			form{background-position-y: 0}
			to{background-position-y: -200px}
		}
		figure.c4>.caitiao{
			width: 200px;
			height: 30px;
			border:1px dashed #00f;
			border-radius:20px;
			background-image:  
				-webkit-repeating-linear-gradient(-30deg,#f00 0px,#f00 5px,#0f0 0px,#0f0 10px,#00f 0px,#00f 15px);
			transform: rotate(90deg);
			background-position: 0px 0px;
			animation:caitiao 5s linear infinite ;
		}
		/*-----------------------珠宝---------------------------------*/
		@keyframes move {
            0% {
                background-size: 60px 60px, 24px 24px;
            }

            50% {
                background-size: 120px 120px, 100px 100px;
            }

            100% {
                background-size: 24px 24px, 140px 140px;
            }
        }
		figure.c4>.zhubao{
			width: 200px;
			height: 200px;
			border:10px solid #000;
			border-radius:50%;
			box-shadow:
				inset 0 15px 15px -5px hsla(0,0%,100%,.7), 
				inset 0 -5px 10px 3px hsla(0,0%,0%,.6), 
				0 8px 10px 2px hsla(0,0%,0%,.3);
			background:  
			    repeating-radial-gradient( hsla(320,100%,60%,.6) 0px, 
			    hsla(220,100%,60%,0) 60%), 
			    repeating-radial-gradient( hsla(330,100%,40%,1) 12%, 
			    hsla(320,80%,60%,1) 24px) center/60px 60px;
			transition: 0.5s cubic-bezier(.32,0,.15,1);
			transform:scale(0.6);
			cursor: pointer;
		}
		figure.c4>.zhubao:hover{
			transform:scale(1.2);
			animation: move 5s cubic-bezier(.32,0,.15,1) infinite alternate-reverse both;
		}
		/*-----------------------google-logo---------------------------------*/
		figure.c4>.google{
			width: 300px;
			height: 300px;
			position: relative;
			border-radius: 150px;
			margin: 100px auto;
			transform:scale(0.2);
			box-shadow: 0 0 40px rgba(255, 255, 255, 0.8);
			animation: rotate 3s linear infinite;
		}
		figure.c4>.google>.rad {
			width: 120px;
			height: 120px;
			background-color: #4c8cf5;
			border-radius: 60px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-top: -60px;
			margin-left: -60px;
			border: 6px solid #fff;
			box-sizing: border-box;
			z-index: 12;
		}
		figure.c4>.google>.same {
			width: 300px;
			height: 300px;
			position: absolute;
			border-radius: 50%;
			background: -webkit-linear-gradient(top, #de5246 90px, rgba(255, 255, 255, 0) 0px);
		}
		figure.c4>.google>.same:nth-child(2) {
			background: -webkit-linear-gradient(top, #ffce44 90px, rgba(255, 255, 255, 0) 0);
			transform: rotate(120deg);
			z-index: -1;
		}
		figure.c4>.google>.same:nth-child(3) {
			background: -webkit-linear-gradient(top, #1ba261 90px, rgba(255, 255, 255, 0) 0);
			transform: rotate(-120deg);
			z-index: -2;
		}
		figure.c4>.google>.sin {
			width: 0;
			height: 0;
			border-left: 86px solid #de5246;
			border-top: 50px solid transparent;
			border-bottom: 50px solid transparent;
			position: absolute;
			margin-left: 64.8px;
			margin-top: 61.5px;
			transform: rotate(-30deg);
		}
		figure.c4>.google>.sin:nth-of-type(4) {
			border-left: 86px solid #de5246;
			border-top: 49px solid transparent;
			border-bottom: 50px solid transparent;
		}
		figure.c4>.google>.sin:nth-of-type(5) {
			margin-left: 174px;
			border-left: 86px solid #ffce44;
		}
		figure.c4>.google>.sin:nth-of-type(6) {
			margin-left: 119.1px;
			margin-top: 155px;
			border-left: 87px solid #1ba261;
		}
		figure.c4>.google>.san {
			border-bottom: 29px solid #1ba261;
			border-left: 16px solid transparent;
			border-right: 17px solid transparent;
			position: absolute;
			margin-top: 61px;
			margin-left: 13px;
		}
		figure.c4>.google>p {
			position: absolute;
			bottom: 0;
			text-align: center;
			font-size: 50px;
			color: #fff;
			text-shadow: 0 0 40px rgba(255, 255, 255, 0.8);
			margin-top: -15px;
		}
        @keyframes rotate {
            0%{transform: rotate(0deg)}
            100%{transform: rotate(360deg)}
        }
		/*-----------------------qq-logo---------------------------------*/
		figure.c4>.qq{
			position: relative;
		}
		figure.c4>.qq>h2{
			position: absolute;
			top: 132px;
			left: 43%;
		}
		#box{
           width: 520px;
           height: 520px;
           background: #eaeaea;
           border: 1px solid #ccc;
           position: relative;
           transform:scale(.3);
       }
       #box .head{
           width: 300px;
           height: 300px;
           position: absolute;
           left: 50%;
           top: 10px;
           margin-left: -150px;
           z-index: 10;
       }
       #box .head .headup{
           width: 300px;
           height: 150px;
           background: #000;
           border-radius: 150px 150px 0 0;
       }
       #box .head .headdown{
           width: 300px;
           height: 200px;
           background: #000;
           margin-top: -100px;
           border-radius:150px/100px ;
       }
       #box .head .eyes{
           width: 60px;
           height: 90px;
           background: #fff;
           position: absolute;
           top: 60px;
           left: 50%;
           border-radius: 30px/45px;
       }
       #box .head .eyes:nth-of-type(3){
           margin-left: -70px;
       }
       #box .head .eyes:nth-of-type(4){
           margin-left: 10px;
       }
       #box .head .eyes .left{
           position: absolute;
           left: 30px;
           top: 30px;
           width: 24px;
           height: 35px;
           background: #000000;
           border-radius: 12px/18px;
       }
       #box .head .eyes .left div{
           width: 10px;
           height: 13px;
           position: absolute;
           left: 10px;
           top: 10px;
           background: #fff;
           border-radius: 5px/6px;
       }
       #box .head .eyes .right{
           width: 24px;
           height: 48px;
           position: absolute;
           left: 10px;
           top: 30px;
           background-image: linear-gradient(to top, #fff 20px ,#000 20px);
           border-radius: 12px/24px;
       }
       #box .head .eyes .right div{
           width: 15px;
           height: 30px;
           position: absolute;
           left:5px;
           top: 13px;
           background: #fff;
           border-radius: 7px/15px;
       }
       #box .head .mouse{
           width: 164px;
           height: 54px;
           position: absolute;
           left: 50%;
           top: 160px;
           margin-left: -82px;
           background: #000;
       }
       #box .head .mouse .top{
           width: 164px;
           height: 70px;
           position: absolute;
           left: 0;
           top: 0;
           border-radius: 82px/35px;
           background-image: linear-gradient(to top,#000 38px ,#FFA600 38px);
       }
       #box .head .mouse .bottom{
           width: 90px;
           height: 24px;
           background: #FFA600;
           position: absolute;
           left: 50%;
           bottom: 0;
           margin-left: -45px;
           border-radius: 45px/12px;
       }
       #box .head .mouse .left{
           width: 70px;
           height: 34px;
           background: #FFA600;
           position: absolute;
           left: 0;
           top: 50%;
           margin-top: -17px;
           border-radius: 35px/17px;
       }
       #box .head .mouse .right{
           width: 70px;
           height: 34px;
           background: #FFA600;
           position: absolute;
           right: 0;
           top: 50%;
           margin-top: -17px;
           border-radius: 35px/17px;
       }
       #box .body{
           width: 320px;
           height: 350px;
           position: relative;
           margin: 170px auto;
           /*background: red;*/
           z-index: 1;
       }
       #box .body .scarf{
           width: 340px;
           height: 180px;
           background: red;
           position: absolute;
           left: 50%;
           top: -50px;
           margin-left: -170px;
           border-top: 1px solid #000;
           border-left: 4px solid #000;
           border-right: 4px solid #000;
           border-bottom: 7px solid #000;
           border-radius: 170px/90px;
           z-index: 2;
       }
       #box .body .scarf1{
           width: 65px;
           height: 100px;
           position: absolute;
           left: 44px;
           top: 85px;
           background: red;
           border-radius: 162px 64px 70px 113px;
           border: 5px solid #000;
       }
       #box .body .belly{
           width: 300px;
           height: 300px;
           background: #fff;
           border-radius: 50%;
           position: absolute;
           left: 50%;
           top: -33px;
           margin-left: -150px;
       }
       #box .body .bellyout{
           width: 340px;
           height: 340px;
           background: #000;
           border-radius: 50%;
           position: absolute;
           left: 50%;
           top: -66px;
           margin-left: -170px;
       }
       #box .hands div{
           width: 70px;
           height: 150px;
           position: absolute;
           left: 50%;
           top: 230px;
           background: #000;
       }
       #box .hands .left{
           margin-left: -220px;
           border-radius: 100% 10% ;
       }
       #box .hands .right{
           margin-left: 155px;
           border-radius: 10% 100% ;
       }
       #box .foots div{
           width: 160px;
           height: 90px;
           position: absolute;
           top: 380px;
           left: 50%;
           background: #FFA600;
           border-radius: 80px/50px;
           border: 7px solid #000;
       }
       #box .foots .left{
           margin-left: -170px;
       }
       #box .foots .right{
           margin-left: 10px;
       }
       /*-----------------------天空---------------------------------*/
       figure.tiankong{
	       	position: relative;
	        width:100%; 
	        height:500px;
	        background-color: #2380ff;
	        animation: bg 10s linear infinite alternate;
       }
        figure.tiankong>figcaption{
        	position: relative;
        	top:-40px;
        	display: flex;
        	justify-content: center;
        }
       figure.tiankong > div{
			position: absolute;
			width:100%; 
			height:100%;
			background-position: 0 0;
			animation-name: yuncai;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
       }
       figure.tiankong > div.bg1{
       		background-image: url(img/cloud_one.png);
       	    animation-duration: 80s;
       }
        figure.tiankong > div.bg2{
       		background-image: url(img/cloud_two.png);
       	    animation-duration: 60s;
       }
        figure.tiankong > div.bg3{
       		background-image: url(img/cloud_three.png);
       	    animation-duration: 40s;
       }
       @keyframes yuncai {
           to{background-position: -1477px}
       }
       @keyframes bg {
           to{background:#f000f0}
       }
	/*-----------------------优惠券等......---------------------------------*/
	figure.c5{
		position: relative;
		margin:100px auto;
		display: flex;
		flex-flow:row wrap;
		justify-content:space-around;
		align-items:center;
	}
	figure.c5 > figcaption{
		position: absolute;
		top:-50px;
		left: 40%;
	}
	/*-----------------------红星---------------------------------*/
	figure.c5 >.heart{
		position: relative;
		width: 100px;
		height: 170px;
	}
	figure.c5 >.heart:before{
		position: absolute;
		content:'';
		overflow:hidden;
		border-width: 75px 50px 75px 50px;
		border-style:solid;
		border-radius:100px 100px 0 0;
		border-color:#000;
		transform:rotate(45deg);
	}
	figure.c5 >.heart:after{
		position: absolute;
		left: -37px;
		top: 1.45px;
		content:'';
		overflow:hidden;
		border-width: 75px 50px 75px 50px;
		border-style:solid;
		border-radius:100px 100px 0 0;
		border-color:#f00;
		transform:rotate(-45deg);
	}
	/*-----------------------鸡蛋---------------------------------*/
	figure.c5 > .egg{
		width: 148px;
	    height: 200px;
	    border: 1px solid #ccc;
	    border-radius: 99px 93px 99px 94px/150px 150px 99px 106px;
	    box-shadow: inset 18px 10px 104px rgba(0,0,0,.5);
	}
	/*椭圆气泡*/
	figure.c5 > .oval-pop {
		width: 200px;
		height: 100px;
		background: #669;
		-moz-border-radius: 100px / 50px;
		-webkit-border-radius: 100px / 50px;
		border-radius: 100px / 50px;
		margin-bottom: 50px;
		position: relative
	}
	figure.c5 > .oval-pop:after {
		content: "";
		border: 0 solid transparent;
		border-bottom: 30px solid #669;
		-moz-border-radius: 0 0 0 200px;
		-webkit-border-radius: 0 0 0 200px;
		border-radius: 0 0 0 200px;
		width: 50px;
		height: 50px;
		margin-top: 20px;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		position: absolute;
		top: 50px;
		left: 20px
	}
	
	figure.c5 >.tail-lefttop {
		border: 0 solid transparent;
		border-top: 30px solid #ff5340;
		-moz-border-radius: 100px 0 0 0;
		-webkit-border-radius: 100px 0 0 0;
		border-radius: 100px 0 0 0;
		width: 100px;
		height: 100px;
	}
	figure.c5 > .pop {
		width: 200px;
		height: 100px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		border-radius: 20px;
		background: #d6c4a1;
		margin-top: 20px;
		position: relative
	}
	figure.c5 > .pop:after {
		content: "";
		border: 0 solid transparent;
		border-bottom: 30px solid #d6c4a1;
		-moz-border-radius: 0 0 0 200px;
		-webkit-border-radius: 0 0 0 200px;
		border-radius: 0 0 0 200px;
		width: 50px;
		height: 50px;
		margin-top: 20px;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		position: absolute;
		top: 65px;
	}
	figure.c5 > .coupon1 {
		width: 387px;
		height: 140px;
		padding: 7px 10px;
		position: relative;
		overflow: hidden;
		background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #F39B00 5px) 9px 3px/15px 15px;
	}
	figure.c5 > .coupon1:before {
		content: '';
		overflow: hidden;
		padding:10px 0;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 10px;
		right: 10px;
		z-index: -1;
		background-color: #F39B00;
	}
	figure.c5 > .coupon1:after {
		content: '';
		position: absolute;
		left: 10px;
		top: 10px;
		right: 10px;
		bottom: 10px;
		box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);
		z-index: -2;
	}
	figure.c5 > .coupon1 > i {
		position: absolute;
		left: 20%;
		top: 45px;
		height: 190px;
		width: 390px;
		background-color: rgba(255, 255, 255, .15);
		transform: rotate(-30deg);
	}
	figure.c5 > .coupon1 > .par {
		float: left;
		padding: 16px 15px;
		width: 223px;
		border-right: 2px dashed rgba(255, 255, 255, .3);
		text-align: left;
	}
	figure.c5 > .coupon1 > .par p {
		color: #fff;
	}
	figure.c5 > .coupon1 > .par span {
		font-size: 50px;
		color: #fff;
		margin-right: 5px;
	}
	figure.c5 > .coupon1 > .par .sign {
		font-size: 34px;
	}
	figure.c5 > .coupon1 > .par sub {
		position: relative;
		top: -5px;
		color: rgba(255, 255, 255, .8);
	}
	figure.c5 > .coupon1 > .copy {
		display: inline-block;
		padding: 21px 14px;
		width: 100px;
		vertical-align: text-bottom;
		font-size: 30px;
		color: rgb(255, 255, 255);
	}
	figure.c5 > .coupon1 > .copy p {
		font-size: 16px;
		margin-top: 15px;
	}
	</style>
</head>
<body>
	<div id="konwledege"><a href="baseKnowledege.html" target="_self">基本知识</a></div>
	<a href="#" id='toTop'>Top</a>
	<figure class='slider'>
		<figcaption><h2 class='on'>无缝轮播</h2></figcaption>
		<ul class='on'>
			<li><img src="http://img.hb.aicdn.com/554d72fd1e5e1339d1b0045d8efcada3572b78bda20a-XU0LS4_fw658" alt=""></li>
			<li><img src="http://i1.3conline.com/images/piclib/201109/25/batch/1/110972/1316952125988v01o89xiyl_medium.jpg" alt=""></li>
			<li><img src="http://nd.fjsen.com/images/attachement/jpg/site162/20120410/00e04cdc145b10ee30e507.jpg" alt=""></li>
			<li><img src="http://img04.tooopen.com/images/20131101/sy_45119437536.jpg" alt=""></li>
			<li><img src="http://img.hb.aicdn.com/554d72fd1e5e1339d1b0045d8efcada3572b78bda20a-XU0LS4_fw658" alt=""></li>
			<li><img src="http://i1.3conline.com/images/piclib/201109/25/batch/1/110972/1316952125988v01o89xiyl_medium.jpg" alt=""></li>
			<li><img src="http://nd.fjsen.com/images/attachement/jpg/site162/20120410/00e04cdc145b10ee30e507.jpg" alt=""></li>
			<li><img src="http://img04.tooopen.com/images/20131101/sy_45119437536.jpg" alt=""></li>
		</ul>
	</figure>
	<figure class="c2">
		<figcaption><h2>延迟动画</h2></figcaption>
		<ul>
			<li>
				<div>
					<img src="img/bg_icon.png" alt="">
					<img src="img/html.png" alt="">
				</div>
				<div>
					<h3>网页制作</h3>
					<p>HTML</p>
					<a href="javascript:">点击查看</a>
				</div>
				<div>
					<h2>网页制作</h2>
					<p>HTML</p>
					<P>课程:html+div+css</P>
				</div>
			</li>
			<li>
				<div>
					<img src="img/bg_icon.png" alt="">
					<img  src="img/js.png" alt="">
				</div>
				<div>
					<h3>网页特效</h3>
					<p>javascript</p>
					<a href="javascript:">点击查看</a>
				</div>
				<div>
					<h2>网页特效</h2>
					<p>javascript</p>
					<P>课程:javascript+jq</P>
				</div>
			</li>
			<li>
				<div>
					<img src="img/bg_icon.png" alt="">
					<img class='l20' src="img/html5.png" alt="">
				</div>
				<div>
					<h3>响应式网站</h3>
					<p>HTML5</p>
					<a href="javascript:">点击查看</a>
				</div>
				<div>
					<h2>响应式网站</h2>
					<p>HTML5</p>
					<P>课程:html5+css3</P>
				</div>
			</li>
			<li>
				<div>
					<img src="img/bg_icon.png" alt="">
					<img src="img/dome.png" alt="">
				</div>
				<div>
					<h3>网站特训</h3>
					<p>CMS</p>
					<a href="javascript:">点击查看</a>
				</div>
				<div>
					<h2>网站特训</h2>
					<p>CMS</p>
					<P>课程:cms</P>
				</div>
			</li>
		</ul>
	</figure>
	<figure class="c3">
		<figcaption><h2>手风琴</h2></figcaption>
		<div class="wrap">
			<ul>
				<li>
					<ol>
						<li><img src="http://p0.so.qhimgs1.com/bdr/200_200_/t01227e4ae7064bfac0.jpg" alt=""></li>
						<li><img src="http://attach.bbs.miui.com/forum/201502/08/101239c6006ffxvv0d206i.jpg" alt=""></li>
						<li><img src="http://p4.so.qhimgs1.com/bdr/200_200_/t01a95b9100ea6c1274.jpg" alt=""></li>
						<li><img src="http://p3.so.qhimgs1.com/bdr/200_200_/t01ac2cb106de3d6123.jpg" alt=""></li>
						<li></li>
						<li></li>
					</ol>
					<h1>one</h1>
				</li>
				<li>
					<ol>
						<li><img src="http://p3.so.qhimgs1.com/bdr/200_200_/t0156e74fc53d8ee2c3.jpg" alt=""></li>
						<li><img src="http://p5.so.qhimgs1.com/bdr/200_200_/t016fe33ee182d79abb.jpg" alt=""></li>
						<li><img src="http://p2.so.qhmsg.com/bdr/200_200_/t016e48b68056af8117.jpg" alt=""></li>
						<li><img src="http://p1.so.qhmsg.com/bdr/200_200_/t014ad48d6571c15856.jpg" alt=""></li>
						<li></li>
						<li></li>
					</ol>
					<h1>two</h1>
				</li>
				<li>
					<ol>
						<li><img src="http://p1.so.qhimgs1.com/bdr/200_200_/t011958c7d2afc21ecd.jpg" alt=""></li>
						<li><img src="http://p4.so.qhmsg.com/bdr/200_200_/t01ccd009c165999d59.jpg" alt=""></li>
						<li><img src="http://p2.so.qhimgs1.com/bdr/200_200_/t01224179798be354de.jpg" alt=""></li>
						<li><img src="http://p1.so.qhmsg.com/bdr/200_200_/t01ae07667080cffcd6.jpg" alt=""></li>
						<li></li>
						<li></li>
					</ol>
					<h1>three</h1>
				</li>
				<li>
					<ol>
						<li><img src="http://p2.so.qhimgs1.com/bdr/200_200_/t0128350dd89f4a98d2.jpg" alt=""></li>
						<li><img src="http://p4.so.qhmsg.com/bdr/200_200_/t01d97800d3ade6f9d9.jpg" alt=""></li>
						<li><img src="http://p2.so.qhmsg.com/bdr/200_200_/t01849d6461e99616d7.jpg" alt=""></li>
						<li><img src="http://p1.so.qhimgs1.com/bdr/200_200_/t01a862c7191c369d81.jpg" alt=""></li>
						<li></li>
						<li></li>
					</ol>
					<h1>four</h1>
				</li>
				<li>
					<ol>
						<li><img src="http://p1.so.qhimgs1.com/bdr/200_200_/t010c0b9eff2d70e21d.jpg" alt=""></li>
						<li><img src="http://p0.so.qhimgs1.com/bdr/200_200_/t01c2692c8575487ac0.jpg" alt=""></li>
						<li><img src="http://p0.so.qhimgs1.com/bdr/200_200_/t01bac7d1cf56e4d51c.jpg" alt=""></li>
						<li><img src="http://p0.so.qhimgs1.com/bdr/200_200_/t013444f8d44ed7c5cc.jpg" alt=""></li>
						<li></li>
						<li></li>
					</ol>
					<h1>five</h1>
				</li>
				<li>
					<ol>
						<li><img src="http://p1.so.qhimgs1.com/bdr/200_200_/t01262235a94feeb931.jpg" alt=""></li>
						<li><img src="http://p5.so.qhimgs1.com/bdr/200_200_/t01862530a919c58d7b.jpg" alt=""></li>
						<li><img src="http://p0.so.qhimgs1.com/bdr/200_200_/t01e5dfe2b778dee9f0.jpg" alt=""></li>
						<li><img src="http://p1.so.qhimgs1.com/bdr/200_200_/t01cf51aab83a5d2881.jpg" alt=""></li>
						<li></li>
						<li></li>
					</ol>
					<h1>six</h1>
				</li>
			</ul>
		</div>
	</figure>
	<figure class='c4'>
		<figcaption><h2>牛排/太极/霓虹灯/珠宝</h2></figcaption>
		<div class="steak">
			<div class="line"></div>
		</div>
		<div class="bagua">
		</div>
		<div class="caitiao">
		</div>
		<div class="zhubao"></div>
		<!-- <div class="google">
	        <div class="same"></div>
	        <div class="same"></div>
	        <div class="same"></div>
	        <div class="sin"></div>
	        <div class="sin"></div>
	        <div class="sin"></div>
	        <div class="san"></div>
	        <div class="rad"></div>		    
		</div> -->
		<div class="qq">
			<h2>copy</h2>
			<div id="box">
			       <div class="head">
			           <div class="headup"></div>
			           <div class="headdown"></div>
			           <div class="eyes">
			               <div class="left">
			                   <div></div>
			               </div>
			           </div>
			           <div class="eyes">
			               <div class="right">
			                   <div></div>
			               </div>
			           </div>
			           <div class="mouse">
			               <div class="top"></div>
			               <div class="bottom"></div>
			               <div class="left"></div>
			               <div class="right"></div>
			           </div>
			       </div>
			       <div class="body">
			           <div class="bellyout"></div>
			           <div class="belly"></div>
			           <div class="scarf1"></div>
			           <div class="scarf"></div>
			       </div>
			       <div class="hands">
			           <div class="left"></div>
			           <div class="right"></div>
			       </div>
			       <div class="foots">
			           <div class="left"></div>
			           <div class="right"></div>
			       </div>
			   </div>
		</div>
	</figure>
	<figure class="tiankong">
		<figcaption><h2>天空</h2></figcaption>
		<div class="bg1"></div>
		<div class="bg2"></div>
		<div class="bg3"></div>
	</figure>
	<figure class="c5">
		<figcaption><h2>多边形/优惠券</h2></figcaption>
		<div class="heart"></div>
		<div class="egg"></div>
		<div class="oval-pop"></div>
		<div class="tail-lefttop"></div>
		<div class="pop"></div>
		<div class="coupon1">
			<div class="par">
				<p>XXXXXX折扣店</p>
				<sub class="sign">￥</sub>
				<span>50.00</span>
				<sub>优惠券</sub>
				<p>订单满100.00元</p>
			</div>
			<div class="copy">副券
				<p>2015-08-13<br>2016-08-13</p>
			</div>
			<i></i>
		</div>		
	</figure>
	<script>
		
	</script>
</body>
</html>